<template>
  <el-dialog v-model="showDialog"
    :close-on-click-modal="clickModalClose" size="full"
    @open = "open"
    :showClose="showClose" title="请选择站点" custom-class="select-site-dialog">
      <div class="select-site">
        <div class="select-site-body" ref="loadingBody">
          <div class="sites-list" v-if="list.length">
            <div class="site-column" v-for="item in list" @click="handleSwitchSite(item)">
              <div class="site-item">
                <div class="site-bg">
                  <div class="site-icon icon-effect" v-if="item.logo" :style="'background-image:url('+ item.logo +')'"></div>
                  <div class="site-icon icon-effect" v-if="!item.logo" :style="'background-color:'+ getRandomColor () +')'">
                    <span class="icon-txt">{{ item.site_name }}</span>
                  </div>
                </div>
                <span class="site-text">{{ item.site_name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    <div class="tips" v-if="hasMoreData===false && list.length === 0">暂无数据</div>
  </el-dialog>
</template>
<style lang="scss">
  .customs {
    .el-dialog--full {
      overflow: hidden;
    }
  }
  .select-site {
    overflow-x: hidden;
    overflow-y: auto;

    .site-column {
      float: left;
      width: 23%;
      margin: 4px 1% 20px;
      text-align: center;
      padding-top: 10px;
    }

    .select-site-body {
      max-height: 39rem;
      min-height: 230px;
      overflow: hidden;
      overflow-y: auto;
      padding-left: 4px;
    }

    .site-item {
      cursor: pointer;
      display: inline-block;
    }

    .site-icon {
      width: 100px;
      height: 100px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      border-radius: 50%;
      margin-top: 4px;
      background-color: #3498DB;
      display: inline-block;
    }

    .site-icon:hover {

    }

    .site-text {
      color: #3498DB;
      padding: 10px 0;
      display: inline-block;
      font-size: bolder;
    }

    .icon-txt {
      font-size: 18px;
      font-weight: bolder;
      text-overflow: ellipsis;
      height: 20px;
      overflow: hidden;
      width: 100%;
      white-space: nowrap;
      color: white;
      display: inline-block;
      vertical-align: middle;
      padding-top: 50%;
      margin-top: -10px;
    }
  }

  .select-site-dialog {
    .el-dialog__header {
      padding-top: 0;
      padding-bottom: 4px;
      border-bottom: 3px solid #f4f6fb;
    }
    .el-dialog__title {
      color: rgb(31, 45, 61);
    }

    .el-dialog__body {
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 8px;
      padding-top: 8px;
    }
  }

  .loadingBody {
    z-index: 2004;
  }
</style>
<script>
import { Dialog, Loading } from 'element-ui'
import {mapActions, mapState} from 'vuex'
import N from '../lib/notification'

export default {
  data () {
    return {
      showDialog: false,
      clickModalClose: false,
      showClose: false,
      loading: true,
      list: [],
      hasMoreData: true
    }
  },
  components: {
    [Dialog.name]: Dialog
  },
  watch: {
    loading (val) {
      this.$emit('changeLoading', val)
    }
  },
  methods: {
    open () {
      setTimeout(() => {
        console.log(this.$refs.loadingBody)
        this.loadingInstance = Loading.service({
          target: this.$refs.loadingBody,
          customClass: 'loadingBody',
          text: '拼命加载中'
        })
        this.getSites().then((response) => {
          console.log(response.data)
          this.hasMoreData = false
          this.loading = false
          if (response.data.errcode === 0) {
            this.list = response.data.results
          }
          this.loadingInstance.close()
        }).catch((err) => {
          this.loading = false
          this.loadingInstance.close()
          console.log(err)
        })
      }, 2000)
    },
    getRandomColor () {
      var letters = '0123456789ABCDEF'
      var color = '#'
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)]
      }
      return color
    },
    handleSwitchSite (item) {
      this.loading = true
      this.switchSite(item).then((response) => {
        if (response.data.errcode === 0) {
          setTimeout(() => {
            this.loading = false
          }, 2000)
          this.hideSwitchSite()
          N.notify('success', response.data.errmsg)
        } else {
          N.notify('error', response.data.errmsg)
          setTimeout(() => {
            this.loading = false
            this.logout(false)
            this.hideSwitchSite()
            this.$router.push({ name: 'login' })
          }, 2000)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    ...mapActions({
      getSites: 'getSites',
      switchSite: 'switchSite',
      showSwitchSite: 'showSwitchSite',
      hideSwitchSite: 'hideSwitchSite',
      logout: 'logout'
    })
  },

  mounted () {
    console.log('SelectSite')
    this.showDialog = true
  }
}
</script>
